{{define "content"}}
  <article class="grid">
    <div>
      <hgroup>
        <h2>Account settings</h2>
        <h3>Update your account settings and password here</h3>
      </hgroup>
      <form action="/settings" enctype="multipart/form-data" method="POST">
        <div class="grid">
          <div>
            <hgroup>
              <h2>
                <img id="avatar" class="avatar" src="/user/{{ .User.Username }}/avatar" />
                <a href="/user/{{ .User.Username }}" data-tooltip="View profile">{{ .User.Username }}</a>
              </h2>
              <h3>
                <p><i>{{ .User.Tagline }}</i></p>
              </h3>
            </hgroup>
            <label for="avatar">
              Change avatar
              <input id="avatar_upload" type="file" accept="image/png, image/jpeg" name="avatar_file" aria-label="Upload Avatar" />
            </label>
          </div>
          <div>
            {{ template "profileLinks" (dict "Profile" (.User.Profile .BaseURL .User) "ShowConfig" true) }}
          </div>
        </div>
        <div class="grid">
          <div>
            <label for="tagline">
              Update tagline:
              <input id="tagline" type="text" name="tagline" placeholder="A short description, catchphrase or slogan about yourself" aria-label="Tagline" value="{{ .User.Tagline }}" />
            </label>
          </div>
        </div>
        <div class="grid">
          <div>
            <label for="password">
              Change password:
              <input id="password" type="password" name="password" placeholder="Updated password" aria-label="Password" autocomplete="current-password">
            </label>
          </div>
          <div>
            <label for="email">
              Change email:
              <input id="email" type="email" name="email" placeholder="Updated email address" aria-label="Email" value="{{ .User.Email }}">
              <small>
                <b>NOTE:</b>We DO NOT actually store this! If you forget
                or loose access to your Email account provided here, it will
                be impossible to recovery your Twt.social account!
              </small>
            </label>
          </div>
        </div>
        <div class="grid">
          <div>
            <label for="displayDatesInTimezone">
              Display dates in timezone:
              <select id="displayDatesInTimezone"  name="displayDatesInTimezone">
                {{ range .Timezones }}
                  <option value="{{ .TzName }}" {{ if eq $.User.DisplayDatesInTimezone .TzName }}selected{{ end }}>{{ .NameWithOffset }}</option>
                {{ end }}
              </select>
            </label>
          </div>
          <div>
            <fieldset>
              <legend>Privacy settings:</legend>
              <label for="isFollowersPubliclyVisible">
                <input id="isFollowersPubliclyVisible" type="checkbox" name="isFollowersPubliclyVisible" aria-label="Show followers publicly" role="switch" {{ if .User.IsFollowersPubliclyVisible }}checked{{ end }}>
                Show my followers publicly
              </label>
              <label for="isFollowingPubliclyVisible">
                <input id="isFollowingPubliclyVisible" type="checkbox" name="isFollowingPubliclyVisible" aria-label="Show user/feed followings publicly" role="switch" {{ if .User.IsFollowingPubliclyVisible }}checked{{ end }}>
                Show my followings publicly
              </label>
            </fieldset>
          </div>
          <div>
            <fieldset id="theme">
              <legend>Theme:</legend>
              <label for="theme-auto">
                <input type="radio" id="theme-auto" name="theme" value="auto" {{ if eq .User.Theme "auto" }}checked{{ end }}>
                <i class="icss-magic-wand"></i>
                Auto
              </label>
              <label for="theme-dark">
                <input type="radio" id="theme-dark" name="theme" value="dark" {{ if eq .User.Theme "dark" }}checked{{ end }}>
                <i class="icss-composite-darker"></i>
                Dark
              </label>
              <label for="theme-light">
                <input type="radio" id="theme-light" name="theme" value="light" {{ if eq .User.Theme "light" }}checked{{ end }}>
                <i class="icss-composite-lighter"></i>
                Light
              </label>
            </fieldset>
          </div>
        </div>
        <button type="submit" class="primary">Update</button>
      </form>
        
      <details>
        <summary>API Tokens</summary>
        <table>
          <thead>
            <th>Client</th>
            <th>Created</th>
            <th>Expiry</th>
            <th>Delete</th>
          </thead>
          <tbody>
            {{range $val := .Tokens}}
            <tr>
              <td>{{$val.UserAgent}}</td>
              <td>{{$val.CreatedAt}}</td>
              <td>{{$val.ExpiresAt}}</td>
              <td>
                <form action="/token/delete/{{$val.Signature}}" method="POST" onsubmit="return confirm('Are you sure you want to delete this token? This cannot be undone!');">
                  <button type="submit" data-tooltip="Delete" class="outline secondary">
                    <i class="icss-x"></i>
                  </button>
                </form>              
              </td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </details>  

      <details>
        <summary>Delete account</summary>
        <p>
          <b>WARNING:</b>&nbsp;This is permanent and cannot be undone!
          (<i>There is no confirmation!</i>)
        </p>
        <form action="/deleteFeeds" method="GET">
          <button type="submit" class="contrast">Delete</button>
        </form>
      </details>

      {{ if .IsAdmin }}
        <details>
          <summary>Pod Management</summary>
          <p>
            <ul>
              <li><a href="/manage/pod">Manage Pod</a></li>
              <li><a href="/manage/users">Manage Users</a></li>
            </ul>
          </p>
        </details>
      {{ end }}

    </div>
  </article>
{{end}}
